<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - materials - dynamic cube reflection</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            position: absolute;
            top: 0px; width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family:Monospace;
            font-size:13px;
            font-weight: bold;
            text-align:center;
        }
        a {
            color: #ffffff;
        }
    </style>
</head>
<body>

<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - materials - dynamic cube reflection<br/>Photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">J&oacute;n Ragnarsson</a>.</div>

<script src="../build/three.js"></script>
<script src="./js/controls/OrbitControls.js"></script>

<script>
    var camera, scene, renderer,controls;
    var sphere, material;
    var cubeCamera2;
    var textureLoader = new THREE.TextureLoader();
    textureLoader.load( 'textures/puydesancy.jpg', function ( texture ) {
        //texture.mapping = THREE.UVMapping;
        init( texture );
        animate();
    } );
    function init( texture ) {
        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.set(0,0,0);
        scene = new THREE.Scene();
        var mesh = new THREE.Mesh( new THREE.SphereBufferGeometry( 500, 102, 16 ), new THREE.MeshBasicMaterial( { map: texture } ) );
        mesh.geometry.scale( - 1, 1, 1 );
        scene.add( mesh );



        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        controls=new THREE.OrbitControls( camera, renderer.domElement );
        controls.target.set(0.01,0,0);
        controls.enableZoom=true;


        cubeCamera2 = new THREE.CubeCamera( 1, 1000, 1024 );
        cubeCamera2.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
        scene.add( cubeCamera2 );

        document.body.appendChild( renderer.domElement );
        //
        material = new THREE.MeshBasicMaterial( {
            envMap: cubeCamera2.renderTarget.texture
        } );
        sphere = new THREE.Mesh( new THREE.SphereGeometry(100,180,180), material );
        sphere.position.set(0,0,300);
        //sphere.geometry.scale(-1,1,1);
        scene.add( sphere );

        //

        window.addEventListener( 'resize', onWindowResized, false );
    }
    function onWindowResized( event ) {
        renderer.setSize( window.innerWidth, window.innerHeight );
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    }


    function animate() {
        requestAnimationFrame( animate );
        controls.update();
        render();
    }
    function render() {

        //sphere.visible = false;
        // pingpong
        material.envMap = cubeCamera2.renderTarget.texture;
        cubeCamera2.update( renderer, scene );
        //sphere.visible = true;
        renderer.render( scene, camera );
    }
</script>

</body>
</html>